<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		strong{
			color: #000000;
		}
		.result {
			color: #ff0000;
		}
	</style>
</head>
<body>
	<h2>点击按钮请求XML数据</h2>
	<div>
		<h3>person1.xml的信息</h3>
		<button type="button" onclick="p1()">请求person1.xml信息:</button>
		<div class="result" id="p1Result"></div>
	</div>
	<div>
		<h3>person2.xml的信息</h3>
		<button type="button" onclick="p2()">请求person2.xml信息:</button>
		<div class="result" id="p2Result"></div>
	</div>
	<script>
		function p1() {
			let xhr = new XMLHttpRequest();
			xhr.open("GET", "person1.xml", true);
			xhr.send();
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					let data = xhr.responseXML;
					let resultDiv = document.getElementById("p1Result");
					resultDiv.innerHTML = `
						<p><strong>标题：</strong>${data.querySelector("title").textContent}</p>
						<p><strong>姓名：</strong>${data.querySelector("name").textContent}</p>
						<p><strong>头衔：</strong>${data.querySelector("tag").textContent}</p>
						<p><strong>成就：</strong>${data.querySelector("achievement").textContent}</p>
						<p><strong>简介：</strong>${data.querySelector("describe").textContent}</p>
					`;
				}
			}
		}
		function p2() {
			let xhr = new XMLHttpRequest();
			xhr.open("GET", "person2.xml", true);
			xhr.send();
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					let data = xhr.responseXML;
					let resultDiv = document.getElementById("p2Result");
					resultDiv.innerHTML = `
						<p><strong>标题：</strong>${data.querySelector('person').getAttribute("title")}</p>
						<p><strong>姓名：</strong>${data.querySelector('person').getAttribute("name")}</p>
						<p><strong>头衔：</strong>${data.querySelector('person').getAttribute("tag")}</p>
						<p><strong>成就：</strong>${data.querySelector('person').getAttribute("achievement")}</p>
						<p><strong>简介：</strong>${data.querySelector('person').getAttribute("describe")}</p>
					`;
				}
			}
		}
	</script>
</body>
</html>